<template>
	<div class="fenlei">
		<div class="zuo">
			<ul>
				<li :class="idx==active?'aa':''" v-for="(item,idx) in datas" :key="idx" @click="dianji(idx),qiehuan(item.sub_categories)" ref="bs">
					<!-- <img src="../assets/hbb.png" alt="" style="width: 1rem; margin-left: 0.5rem;"> -->
					<img :src="item.image_url" alt="" class="zyk">
					<span style="font-size: 0.7rem;margin-left: 0.5rem;color: #666;line-height: 1rem;">{{item.name}}</span>
					<span class="iii">{{item.count}}</span>
					<img src="../assets/jiantou.png" alt="" style="width: 1rem;" class="jt">
				</li>
			</ul>
		</div>
		<div class="you">
			<ul>
				<li v-for="(data,index) in datass" :key="index">
					<span style="font-size: 0.7rem;color: #666;
			line-height: 1.8rem;">{{data.name}}</span>
					<span class="xxx">{{data.count}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "fl",
		data: function() {
			return {
				active: 0,
				datas: [],
				datass: [],
			}
		},
		created: function() {
			// window.console.log(this);
			let obj = this;
			//axios 完成数据的get网络请求
			this.$axios({
				url: 'https://elm.cangdu.org/shopping/v2/restaurant/category',
				method: 'GET',
			}).then(function(res) {
				obj.datas = res.data;
				for (let i = 0; i < obj.datas.length; i++) {
					if (obj.datas[i].image_url == "") {
						obj.datas[i].image_url = "//elm.cangdu.org/img/default.jpg"
					} else {
						let a = obj.datas[i].image_url.slice(0, 1)
						let b = obj.datas[i].image_url.slice(1, 3)
						let c = obj.datas[i].image_url.slice(3)
						obj.datas[i].image_url = "https://fuss10.elemecdn.com" + "/" + a + "/" + b + "/" + c;
						if (/(.*png)$/.test(obj.datas[i].image_url)) {
							obj.datas[i].image_url = RegExp.$1 + ".png";
							// console.log(obj.datas[i].image_url);
						} else if (/(.*jpeg)$/.test(obj.datas[i].image_url)) {
							obj.datas[i].image_url = RegExp.$1 + ".jpeg";
							// console.log(obj.datas[i].image_url);
						}
					}
				}
			}).catch(function(err) {
				window.console.log(err);
			})
		},
		methods: {
			qiehuan(e) {
				window.console.log(e);
				this.datass = e;
				this.activeDisplay = "white"
			},
			dianji(idx) {
				this.active = idx;
				window.console.log(idx)
			}
		}
	}
</script>


<style scoped>
	* {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.fenlei {
		display: flex;
		padding-top: 4rem;
		height: 24.55rem;
	}

	.zuo {
		width: 50%;
		height: 100%;
		background: rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.zuo li {
		padding: 0.74rem 0;
	}

	.iii {
		font-size: 0.8rem;
		color: #fff;
		padding: 0 .3rem;
		border: .025rem solid #ccc;
		border-radius: .5rem;
		background-color: #ccc;
		margin-left: 1rem;
	}

	.jt {
		position: absolute;
		right: 0;
		margin-top: 0.4rem;
	}

	.you {
		width: 50%;
		background: white;
		height: 100%;
		overflow: scroll;
		position: relative;
		padding-left: .5rem;
	}

	.you::-webkit-scrollbar {
		display: none;
		/*隐藏滚动条*/
	}

	.you li {
		padding: 0.7rem 0;
		border-bottom: .025rem solid #e4e4e4;
	}

	.xxx {
		font-size: 0.7rem;
		position: absolute;
		right: 1rem;
		padding-top: 0.5rem;
		line-height: 1rem;
	}

	.aa {
		background-color: white;
	}

	.bb {
		background: rgba(0, 0, 0, 0.01);
	}

	.zyk {
		width: 1rem;
		margin-left: 0.5rem;
	}
</style>
